<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>授权押金统计</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css" />
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		ul,
		li,
		ol {
			list-style: none;
		}
		
		a {
			text-decoration: none;
		}
		
		.mui-col-xs-4,
		.mui-col-sm-4 {
			width: 33.3333333%;
		}
		
		.mui-content {
			background-color: initial;
			z-index: 10;
		}
		
		.classi {
			text-align: center;
			padding: 15px 0 !important;
			font-size: 14px;
			border-right: 1px solid #E9E9E9;
			color: #666 !important;
		}
		
		canvas {
			display: block;
			margin: 0 auto;
			margin-bottom: 15px;
		}
		
		.canvas {
			position: relative;
		}
		
		.canvas p {
			position: absolute;
			top: 0;
			text-align: left;
			padding-left: 10px;
			font-size: 16px;
			color: #000;
			display: block;
			width: 100%;
		}
		
		.canvas p span {
			font-size: 12px;
		}
		
		.canvas .price {
			top: auto;
			bottom: 0;
			text-align: right;
			padding-right: 10px;
		}
		
		.detail {
			padding: 10px;
		}
		
		.detail img {
			margin-top: 25px;
		}
		
		.go_jiesuan {
			position: absolute;
			height: 30px;
			right: 15px;
			top: 50%;
			margin-top: -15px;
			color: green;
			font-size: 14px;
		}
	</style>

	<body>
		<!--下拉刷新容器-->
		<header class="mui-bar mui-bar-nav" style="z-index: 999;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">授权押金统计</h1>
		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">

			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					<div class="mui-row">
						<div class="mui-col-xs-4 mui-col-sm-4">
							<li class="mui-table-view-cell">
								<a class="classi">
									<div class="canvas">
										<!--<p>10005<span>元</span></p>
								<p class="price">10<span>笔</span></p>-->
										<canvas width="80" height="80"></canvas>
									</div>
									押金笔数
								</a>
							</li>
						</div>
						<div class="mui-col-xs-4 mui-col-sm-4 ">
							<li class="mui-table-view-cell">
								<a class="classi">
									<div class="canvas">
										<canvas width="80" height="80"></canvas>
									</div>
									结算笔数
								</a>
							</li>
						</div>
						<div class="mui-col-xs-4 mui-col-sm-4">
							<li class="mui-table-view-cell">
								<a class="classi">
									<div class="canvas">
										<canvas width="80" height="80"></canvas>
									</div>
									退回笔数
								</a>
							</li>
						</div>
					</div>

				</ul>
			</div>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script>
			function canvas(index, bishu, num) { //index:下标
				var canvas = document.getElementsByTagName("canvas")[Number(index)];
				var context = canvas.getContext("2d");
				//设置对象起始点和终点
				context.moveTo(70, 10);
				context.lineTo(10, 70);
				//设置样式
				context.lineWidth = 1;
				context.strokeStyle = "#999";
				//绘制

				//文字
				context.font = "12px Palatino";
				context.fillStyle = "#B92C28";
				context.fillText(bishu + "笔", 10, 32);

				context.font = "12px Palatino";
				context.fillStyle = "green";
				context.fillText(num + "元", 25, 70);

				context.stroke();
			}

			mui.plusReady(function() {
				//页面初始化
				var self = plus.webview.currentWebview();
				var dataId = self.dataId;
				console.log(dataId);
				var start_time = self.start_time;
				var end_time = self.end_time;
				var token = localStorage.getItem("token");
				mui.init({
					pullRefresh: {
						container: '#pullrefresh',
						up: {
							contentrefresh: '正在加载...',
							callback: pullupRefresh
						}
					}
				});
				var count = 1;
				require(weburl + model_count, "json", "post", {
					token: token,
					type: 901,
					time_type: searchType(dataId),
					page: 1,
					number: 1,
					start_time: start_time ? start_time : "",
					end_time: end_time ? end_time : ""
				}, function(response) {
					console.log(JSON.stringify(response));
					//					response = JSON.parse(response);
					//					console.log(JSON.stringify(response));
					var x = 0;
					if(response.status == "success") {
						for(var i = 0; i < 3; i++) {
							if(i == 0) {
								canvas(x++, response.data.yaji.bisu, response.data.yaji.jine);
							} else if(i == 1) {
								canvas(x++, response.data.jiesuan.bisu, response.data.jiesuan.jine);
							} else {
								canvas(x++, response.data.tuihui.bisu, response.data.tuihui.jine);
							}
						}
					} else {
						for(var i = 0; i < 3; i++) {
							canvas(x++, 0, 0);
						}
					}

				})

				if(mui.os.plus) {
					mui.plusReady(function() {
						setTimeout(function() {
							mui('#pullrefresh').pullRefresh().pullupLoading();
						}, 1000);

					});
				} else {
					mui.ready(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					});
				}

				/**
				 * 上拉加载具体业务实现
				 */
				function pullupRefresh() {
					require(weburl + model_count, "json", "post", {
						//接口所需要的参数
						token: token,
						type: 901,
						time_type: searchType(dataId),
						page: count,
						number: 5,
						start_time: start_time ? start_time : "",
						end_time: end_time ? end_time : ""
					}, function(response) {
						console.log(JSON.stringify(response));
						setTimeout(function() {
							var brr = [];
							var table = document.body.querySelector('.mui-table-view');
							var cells = document.body.querySelectorAll('.mui-table-view-cell');
							if(response.status == "success") { //如果查询到数据
								var arr = [];
								for(key in response.data) {
									arr.push(key + "=" + response.data[key]);
									if(response.data[key].id) {
										var li = document.createElement('li');
										li.className = 'mui-table-view-cell';
										li.innerHTML = '<div class="detail" data-authNo="' + response.data[key].auth_no + '" data-orderNum='+response.data[key].out_order_no+'><img class="mui-media-object mui-pull-left" src="../images/' + (response.data[key].pay_type ? response.data[key].pay_type : "dp2") + '.png" style="padding: 10px;"><div class="mui-media-body"><p><label>消费时间：</label>' + response.data[key].created_at + '</p><p><label>订单号：</label>' + response.data[key].out_order_no + '</p><p><label>支付账号：</label>' + response.data[key].payer_logon_id + '</p><p><label>预授权金额：</label>' + response.data[key].amount + '元</p><p><label>消费金额：</label>' + response.data[key].pay_amount + '元</p><p class="mui-ellipsis"><label>备注信息：</label>' + response.data[key].fu_remark + '</p><p><label>交易状态：</label>' + pay_status(response.data[key].pay_status) + '</p><span class="go_jiesuan">' + ((response.data[key].pay_status == 1) ? "可结算" : "") + '</span></div></div>';
										table.appendChild(li);
									}
								}
								var l = (count == 1) ? (arr.length - 3 <= 0) : (arr.length <= 0);
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(l); //参数为true代表没有更多数据了。
							} else if(count == 1) { //如果没有数据
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
							} else { //如果没有查询到数据
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
							}
							count++;
						}, 1500);
					})
				}

				//点击订单进入订单详情
				mui("body").on("tap", ".detail", function(e) {
					mui.openWindow({url:"../view/depositDetail.html", id:"depositDetail.html",extras:{
						authNo:this.getAttribute("data-authNo"),
						orderNum:this.getAttribute("data-orderNum")
					}});
				})

				//支付状态函数
				function pay_status(num) {
					var sta = "";
					switch(num) {
						case 1:
							sta = "未结算";
							break;
						case 2:
							sta = "已取消";
							break;
						case 3:
							sta = "已交易中";
							break;
						case 4:
							sta = "已结算";
							break;
						case 5:
							sta = "已退回";
							break;
					}
					return sta;
				}

				//查询类型
				function searchType(targ) {
					var str = ""
					switch(targ) {
						case "today":
							str = "1";
							break;
						case "yesterday":
							str = "2";
							break;
						case "thisweek":
							str = "3";
							break;
						case "thisMouth":
							str = "4";
							break;
						case "lastMouth":
							str = "5";
							break;
						case "zi":
							str = "0";
							break;
					}
					return str;
				}
			})
		</script>
	</body>

</html>